<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<body>

    <h3>编写代码的方式</h3>
    <p>应用场景：用户购买商品</p>


    <script>
        // 1.0 直接量  {键:值}
        // var obj = {
        //     // 添加属性
        //     userId: "yonghu10010",
        //     prodouctId: "shangpin20210810",
        //     count: 0,
        //     // 添加方法
        //     buy: function() {// 函数作用域
        //         // console.log(this.userId);
        //         // console.log(this.prodouctId);
        //         // 设置购买次数
        //         this.count ++;
        //         var str = "用户"+this.userId+"第"+this.count+"次购买了商品"+this.prodouctId
        //         console.log(str);
        //     }
        // }
        // obj.buy();
        // obj.buy();
        // obj.buy();


        // 创建空对象
        var obj = {}
        // 添加属性
        obj.userId = "yonghu10010";
        obj.prodouctId = "shangpin20210810";
        obj.count = 0;
        // 添加方法
        obj.buy = function(){
                // 设置购买次数
                this.count ++;
                // 字符串拼接
                var str = "用户"+this.userId+"第"+this.count+"次购买了商品"+this.prodouctId
                // 在控制台上输出
                console.log(str);
        }
        // 通过obj调用buy方法
        // obj.buy();


        // 2.0 工厂模式(调用函数,返回一个对象)
        function factory() {
            // 创建空对象
            var o1 = {};
            // 添加属性
            o1.userId = "yonghu10011";
            o1.prodouctId = "shangpin20210811";
            o1.count = 0;
            // 添加方法
            o1.buy = function() {
                // 设置购买次数
                this.count ++;
                // 字符串拼接
                var str = "用户"+this.userId+"第"+this.count+"次购买了商品"+this.prodouctId
                // 在控制台上输出
                console.log(str);
            }
            // 返回o1对象
            return o1; 
        }

        // 调用factory返回对象
        var obj2 = factory();
        // console.log(obj2);//{userId: "yonghu10011", prodouctId: "shangpin20210811", count: 0, buy: ƒ}
        // 去购买商品
        // obj2.buy();   


        // 3.0 构造函数
        var _aaa ;
        function Example() {
            // 添加属性
            this.userId = "yonghu10012";
            this.prodouctId = "shangpin20210811";
            this.count = 0;
            _aaa = this;
            // 添加方法
            this.buy = function(){
                 // 设置购买次数
                 this.count ++;
                 // 字符串拼接
                 var str = "用户"+this.userId+"第"+this.count+"次购买了商品"+this.prodouctId
                 // 在控制台上输出
                 console.log(str);
            }

        }

        // Example(); // 直接调用函数，表示普通函数
        // new Example(); // 通过new操作调用的函数，表示构造函数
        var obj3 = new Example();// 声明变量接收构造函数的实例
        // console.log(obj3);
        // 通过实例对象可以使用构造函数成员（属性和方法）
        obj3.buy();
        obj3.buy();
        obj3.buy();
        console.log(_aaa ===  obj3);// true


        // 总结：
            // 有直接量演化到工厂模式
            // 有工厂模式演化到构造函数
            // 构造函数（进一步简化了代码） ——> 工厂模式（减少冗余代码） ——> 直接量（冗余代码非常多）
    
    
    </script>
</body>
</html>